<template>
	<view class="detailBox">
		<view class="box">
			<view class="nav1">
				<!-- {{detailsList.userDynamicVo.userHeaderImage}} -->
				<!-- <image src="detailsList.userDynamicVo.userHeaderImage" mode=""></image> -->
				<!-- <image :src="detailsList.userDynamicVo.userHeaderImage" mode="" class="image1"></image> -->
				<view class="left">
					<image :src="detailsList.userDynamicVo.userHeaderImage" mode="aspectFit" class="image1"></image>
					<text @click="getToken1">{{detailsList.userDynamicVo.userNickname}}</text>
					<image :src="detailsList.userDynamicVo.userSex=='男'?'../../static/icon/img_icon19.png@2x.png':'../../static/icon/img_icon20.png@2x.png'"
					 mode="aspectFit" class="image2"></image>
				</view>
				<view class="right">
					<text>{{detailsList.dynamicInsertTime}}</text>
				</view>
			</view>
			<view class="nav2">
				<text class="nav2-1">{{detailsList.dynamicDescribe}}</text>
				<text @click="showRule">举报</text>
				<view v-show="x" id="float">
					<view class='floatContent' v-show="o">
						<view class="floatContent-box">
							<checkbox-group name="" @change="inputCheckbox">
								<view class="floatContent1">
									<label class="checkbox">
										<checkbox value="标题夸张" /><text>标题夸张</text>
									</label>
									<label class="checkbox">
										<checkbox value="广告营销" /><text>广告营销</text>
									</label>
									<label class="checkbox">
										<checkbox value="旧闻/重复" /><text>旧闻/重复</text>
									</label>
									<label class="checkbox">
										<checkbox value="疑似抄袭" /><text>疑似抄袭</text>
									</label>
								</view>
								<view class="floatContent2">
									<label class="checkbox">
										<checkbox value="色情/低俗" /><text>色情/低俗</text>
									</label>
									<label class="checkbox">
										<checkbox value="与事实不符" /><text>与事实不符</text>
									</label>
									<label class="checkbox">
										<checkbox value="内容无营养" /><text>内容无营养</text>
									</label>
									<label class="checkbox">
										<checkbox value="其他问题" /><text>其他问题</text>
									</label>
								</view>
							</checkbox-group>
						</view>
						<!-- <button type="button" @click='goReportSuccess()'>举报</button> -->
						<image src="../../static/icon/img_icon12.png@2x.png" mode="aspectFit" class="image1" @click="goReportSuccess()"></image>
						<image src='../../static/icon/img_icon11.png@2x.png' class='ruleHide' @click="hideRule"></image>
					</view>
					<view class="reportSuccess" v-show="o1">
						<image src="../../static/icon/img_icon13.png@2x.png" mode="aspectFit" class="ruleHide1"></image>
						<text>举报成功,系统正在审核...</text>
						<image src='../../static/icon/img_icon11.png@2x.png' class='ruleHide' @click="hideRule"></image>
					</view>
				</view>
			</view>
			<view class="nav3">
				<image :src="item2.dynamicImage" mode="aspectFill" v-for="item2 in detailsList.dynamicImage"></image>
			</view>
			<view class="nav4">
				<view class="nav4-1">
					<image :src="imgscr1" mode="aspectFill" @click="modify1"></image>
					<text :class="a1">{{detailsList.collectionNum}}</text>
				</view>
				<view class="nav4-2">
					<image :src="imgscr2" mode="aspectFill" @click="modify2"></image>
					<text>{{detailsList.commentNum}}</text>
				</view>
				<view class="nav4-3">
					<image :src="imgscr3" mode="aspectFill" @click="modify3"></image>
					<text :class="a2">{{detailsList.pickNum}}</text>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="comment-1">
				<text>全部评论</text>
			</view>
			<view class="comment-2" v-for="item3 in detailsList.allCommentVos">
				<image :src="item3.userHeaderImage" mode="aspectFill"></image>
				<view class="comment-2-text">
					<text>{{item3.userNickname}}</text>
					<text>{{item3.commentInsertTime}}</text>
					<text>{{item3.commentContent}}</text>
				</view>
			</view>
		</view>
		<view class="publishComment" @click="push">
			<image src="../../static/icon/img_icon32.png@2x.png" mode="aspectFill"></image>
			<text>发表评论</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a1: 'a',
				a2: 'a',
				isRuleTrue: 'isRuleHide',
				token: "",
				imgscr1: '../../static/icon/img_icon4.png@2x.png',
				imgscr2: '../../static/icon/img_icon5.png@2x.png',
				imgscr3: '../../static/icon/img_icon7.png@2x.png',
				pid: '',
				o: true,
				o1: false,
				cls: [],
				x: false,
				detailsList: {
					userDynamicVo: {
						userHeaderImage: '',
						userNickname: '',
						userSex: ''
					}
				}

			};
		},

		onLoad(option) {
			this.pid = option.id
			//页面加载就获取token
			this.getToken()
		},
		methods: {
			//举报里面点击复选框获取相应的值
			inputCheckbox: function(e) {
				this.cls = e.detail.value //定义cls获取复选框的数组值
				this.cls = this.cls.join(",") //将数组转化为字符串向后台传递
				console.log(this.cls)
			},
			//获取token值
			getToken() {
				try {
					const token = uni.getStorageSync('token');
					this.token = token
					console.log(token)
					//收藏  取消收藏接口
					this.getCollectionInterface(token)
					//投稿详情接口
					this.getDetailsInterface(token)
					//点赞 取消点赞接口
					this.getLikingInterface(token)
					//举报接口
					this.goReportSuccess(token)
				} catch (e) {}
			},
			//收藏  取消收藏接口
			getCollectionInterface(token) {
				console.log(token)
				this.$request(
					"/comic-time/addCollection", {
						"dynamicId": this.pid
					},
					'POST', {
						"Authorization": token
					}
				).then(res => {
					console.log(res)
				})
			},
			//投稿详情接口
			getDetailsInterface(token) {
				console.log(this.pid)
				this.$request(
					"/comic-time/dynamicDetails", {
						"dynamicId": this.pid
					},
					'GET', {
						"Authorization": token
					}
				).then(res => {
					// console.log(this)
					console.log(res)
					this.detailsList = res.data
					console.log(this.detailsList)
				})
			},
			//点赞 取消点赞接口
			getLikingInterface(token) {
				console.log(token)
				this.$request(
					"/comic-time/addPink", {
						"dynamicId": this.pid,
					},
					'POST', {
						"Authorization": token
					}
				).then(res => {
					console.log(res)
				})
			},
			modify1() {
				if (this.a1 == 'a') {
					this.detailsList.collectionNum++
					this.a1 = 'b'
					this.imgscr1 = '../../static/icon/img_icon36.png@2x.png'
				} else if (this.a1 == 'b') {
					this.detailsList.collectionNum--
					this.a1 = 'a'
					this.imgscr1 = '../../static/icon/img_icon4.png@2x.png'
				}
			},
			modify2() {},
			modify3() {
				if (this.a2 == 'a') {
					this.detailsList.pickNum++
					this.a2 = 'b'
					this.imgscr3 = '../../static/icon/img_icon6.png@2x.png'
				} else if (this.a2 == 'b') {
					this.detailsList.pickNum--
					this.a2 = 'a'
					this.imgscr3 = '../../static/icon/img_icon7.png@2x.png'
				}
			},
			push() {
				uni.navigateTo({
					url: './contribution'
				})
			},
			//打开透明层
			showRule: function() {
				//打开遮罩层
				this.x = true
				//打开举报内容页
				this.o = true
				//关闭举报成功页
				this.o1 = false
			},
			//关闭透明层
			hideRule: function() {
				this.x = false
			},
			//显示和隐藏举报成功的页面
			goReportSuccess() {
				this.o = false
				this.o1 = true
				//举报接口
				this.$request(
					"/comic-time/report", {
						"dynamicId": this.pid,
						"reportContent": this.cls
					},
					'POST', {
						"Authorization": this.token
					}
				).then(res => {
					console.log(res)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #eeeeee;
	}

	.detailBox {
		background-color: #ffffff;

		.box {
			margin-top: 10rpx;
			padding: 0 30rpx;

			.nav1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 18rpx;

				.left {
					display: flex;
					align-items: center;

					.image1 {
						width: 60rpx;
						height: 60rpx;
						background-color: #1389cd;
						border: solid 1rpx #eeeeee;
						border-radius: 50rpx;
					}

					text {
						font-family: PingFangSC-Medium;
						font-size: 28rpx;
						color: #000000;
						margin: 0 14rpx;
					}

					.image2 {
						width: 30rpx;
						height: 30rpx;
						// background-color: #000;
					}
				}

				.right {
					text {
						width: 110rpx;
						height: 20rpx;
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 48rpx;
						letter-spacing: 0rpx;
						color: #999999;
					}
				}
			}

			.nav2 {
				display: flex;
				justify-content: space-between;
				margin-top: 19rpx;

				text {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #333333;
				}

				.nav2-1 {
					border-right: 1px solid #d0cbce;
					width: 90%;
				}

				.isRuleShow {
					display: block;
				}

				.isRuleHide {
					display: none;
				}

				#float {
					height: 100%;
					width: 100%;
					position: fixed;
					background-color: rgba(0, 0, 0, 0.5);
					z-index: 2;
					top: 0;
					left: 0;

					.floatContent {
						padding: 20rpx 0;
						width: 80%;
						height: 500rpx;
						background: #fff;
						margin: 40% auto;
						border-radius: 20rpx;
						position: relative;
						padding-top: 70rpx;

						.floatContent-box {
							display: flex;
							justify-content: space-around;
							align-items: center;

							checkbox-group {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.floatContent2 {
									margin-left: 30rpx;
								}
							}
						}

						.ruleHide {
							height: 60rpx !important;
							width: 60rpx !important;
							position: absolute;
							top: -20rpx;
							right: -28rpx;
						}

						label {
							display: block;
							margin-bottom: 20rpx;

							checkbox {
								color: #faa755;
							}

							text {
								font-size: 28rpx;
							}
						}

						.image1 {
							width: 73%;
							height: 70rpx;
							margin-top: 30rpx;
							position: absolute;
							left: 50%;
							top: 75%;
							transform: translate(-50%, -50%);
						}
					}

					.reportSuccess {
						padding: 20rpx 0;
						width: 80%;
						height: 500rpx;
						background: #fff;
						margin: 60% auto;
						border-radius: 20rpx;
						position: relative;
						padding-top: 70rpx;

						.ruleHide1 {
							position: absolute;
							top: -30%;
							left: -30rpx;
							height: 560rpx;
						}

						text {
							width: 90%;
							position: absolute;
							left: 50%;
							top: 85%;
							transform: translate(-50%, -50%);
							font-size: 30rpx;
							text-align: center;
							font-weight: bolder;

						}

						.ruleHide {
							height: 60rpx !important;
							width: 60rpx !important;
							position: absolute;
							top: -20rpx;
							right: -28rpx;
						}
					}
				}
			}

			.nav3 {
				display: flex;
				justify-content: flex-start;
				margin-top: 15rpx;
				flex-flow: row wrap;

				image {
					width: 221rpx;
					height: 221rpx;
					// background-color: #1389cd;
					border-radius: 10rpx;
					// border: solid 1rpx #e5e5e5;
					margin-bottom: 20rpx;
					margin-right: 10rpx;
				}
			}

			.nav4 {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;

				image {
					width: 25rpx;
					height: 24rpx;
					margin-right: 7rpx;
				}

				.nav4-1 {
					display: flex;
					align-items: center;

					.a {
						color: #666666;
					}

					.b {
						color: #ea1818;
					}

				}

				.nav4-2 {
					display: flex;
					align-items: center;
					margin: 0 200rpx;
					color: #666666;
				}

				.nav4-3 {
					display: flex;
					align-items: center;

					// color: #666666;
					.a {
						color: #666666;
					}

					.b {
						color: #ea1818;
					}
				}
			}
		}

		.comment {
			.comment-1 {
				padding-left: 31rpx;
				border-bottom: 1px solid #eeeeee;
				margin-top: 24rpx;
				margin-bottom: 8rpx;

				text {
					font-family: PingFangSC-Medium;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #333333;
				}
			}

			.comment-2 {
				display: flex;
				margin-top: 20rpx;
				margin-left: 31rpx;
				padding-bottom: 18rpx;

				image {
					width: 75rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.comment-2-text {
					// margin-left: 20rpx;
					border-bottom: solid 1rpx #eeeeee;
					padding-bottom: 18rpx;
					width: 100%;

					text {
						display: block;

						&:nth-child(1) {
							font-family: PingFangSC-Medium;
							font-size: 28rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 48rpx;
							letter-spacing: 0rpx;
							color: #666666;
						}

						&:nth-child(2) {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 48rpx;
							letter-spacing: 0rpx;
							color: #999999;
						}

						&:nth-child(3) {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 48rpx;
							letter-spacing: 0rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.publishComment {
			border-radius: 50%;
			width: 118rpx;
			height: 118rpx;
			background-color: #ff6262;
			text-align: center;
			padding-top: 16rpx;
			position: fixed;
			bottom: 30rpx;
			right: 19rpx;

			image {
				display: block;
				width: 29rpx;
				height: 32rpx;
				margin: 0 auto;
				// border: 1px solid red;
			}

			text {

				font-size: 17rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
